<template>

  <el-table :data="tableDatas" style="width: 100%;" max-height="300" >
    <el-table-column label="序号" width="50">
      <template slot-scope="scope">
        <span>{{scope.$index+1}}</span>
      </template>
    </el-table-column>

    <el-table-column label="图片" width="50">
      <template slot-scope="scope">
        <el-image :z-index="zIndex" v-if="scope.row.productImg != null && scope.row.productImg != '' " slot="reference"
                  :src="scope.row.productImg" class="image-rows" :preview-src-list="[scope.row.productImg]">
        </el-image>
      </template>
    </el-table-column>
    <el-table-column label="商品名称" width="150" align="center" :show-overflow-tooltip="true">
      <template #default="scope">
          <span >{{ scope.row.productName }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="open" label="价格" width="60" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.price }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="open" label="库存" width="60" :show-overflow-tooltip="true">
      <template #default="scope">
        <span>{{ scope.row.stockNumber }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" style="text-align: right;">
      <template #default="scope">
        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>

  export default {
    props:{
      tableData:{
        type:Array,
        default:[]
      },
      proUids:{
        type:Array,
        default:[]
      },
      isShow:{
        type:Boolean,
        default:true
      }
    },
    data() {
      return {
        zIndex:3000,
        open:this.isShow,
        tableDatas: this.tableData,
      }
    },
    methods: {
      handleDelete(index, row) {
        this.proUids.splice(index,1);
        this.tableDatas.splice(index,1);
        this.$emit("rePros",this.proUids)
      }
    }
  }
</script>

<style>

</style>
